<template>
	<view>
		<view class="bg-image" :style="bgStyle"></view>
		<view class="song-list">
			<ul>
				<navigator 
				class="item" 
				v-for="(song,index) in songs" 
				:key="index"
				:url="'/pages/player/player?song=' + encodeURIComponent(JSON.stringify(song))"
				>
					<view class="list">
						<h2 class="name">{{song.name}}</h2>
						<p class="desc">{{song.ar[0].name}}</p>
					</view>
				</navigator>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				songs: [],
				list: []
			}
		},
		computed:{
			bgStyle(){
				return `background-image: url(${this.list.picUrl})`
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item))
			this.list = item 
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + `/playlist/detail?id=${item.id}`,
				method: "GET",
				success: (res) => {
					if(res.data.code === 200){
						this.songs = res.data.playlist.tracks
						console.log(this.songs)
					}
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
.bg-image{
	position: fixed;
	width: 100%;
	height: 0;
	padding-top: 70%;
	background-size: cover;
	transform-origin: top;
	z-index: 100;
}
.song-list{
	position: absolute;
	top: 530rpx;
	overflow: hidden;
	width: 90%;
	margin-left: 30rpx;
}
.item{
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 128rpx;
	font-size: 14px;
	border-bottom: 1px solid #CCCCCC;
}
.name{
	color: #2E3030;
}
.desc{
	color: #757575;
	margin-top: 8rpx;
}
</style>
